<template>
    <div class="main">
        <!--顶栏-->
        <el-row>
            <el-col :span="24" class="title_area">
                <h4>订单管理</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>订单列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <!--搜索栏-->
        <div class="search_panel">
            <el-row>
                <el-col :span="4" class="jiange">
                    <el-input v-model="order_number" placeholder="订单号"></el-input>
                </el-col>

                <el-col :span="4" class="jiangeShort">
                    <el-input v-model="sort_number" placeholder="序号"></el-input>
                </el-col>

                <el-col :span="4" class="jiangeShort">
                    <el-select v-model="status" style="width: 100%" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span="4" class="jiangeShort">
                    <el-select v-model="order_status" style="width: 100%" placeholder="请选择">
                        <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span="4" class="jiangeShort">
                    <el-input type="number" v-model="start" placeholder="金额（起始）"></el-input>
                </el-col>

                <el-col :span="4" class="jiangeShort">
                    <el-input type="number" v-model="end" placeholder="金额（截止)"></el-input>
                </el-col>

                <el-col :span="4" class="jiangeShort">
                    <el-date-picker
                            v-model="date"
                            type="date"
                            placeholder="选择下单日期">
                    </el-date-picker>
                </el-col>

                <el-col :span="4" class="jiangeShort">
                    <el-button type="primary"  class="btn_login" @click="orderAll"><i class="el-icon-search"></i>查询</el-button>
                </el-col>

                <!-- <el-col :span="6">
                    <el-button type="primary"  class="btn_login" @click="orderAll"><i class="el-icon-search"></i>查询</el-button>
                </el-col> -->
            </el-row>
        </div>

        <!--列表-->
        <el-table :data="tableData"  border style="width: 100%;margin-top: 20px">
            <el-table-column prop="order_number" label="订单号"></el-table-column>
            <el-table-column prop="sort_number" label="序号"></el-table-column>
            <!--<el-table-column prop="total_amount" label="总金额"></el-table-column>-->
            <el-table-column prop="status" label="支付状态"></el-table-column>
            <el-table-column prop="order_status" label="上菜状态"></el-table-column>
            <el-table-column prop="date" label="下单日期"></el-table-column>
            <el-table-column prop="created_at" label="下单时间"></el-table-column>
            <el-table-column  label="操作" width="200">
                <template scope="scope">
                    <el-button  type="danger" size="small" @click="deleteOrder(scope.$index, tableData)">删除订单</el-button>
                    <el-button  type="info" size="small" @click="orderDetail(scope.$index,tableData)">订单详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination class="pagination"
                v-if="pagination.total>pagination.per_page"
                @current-change="orderAll"
                background
                layout="prev, pager, next"
                page-size="20"
                :total="pagination.total">
        </el-pagination>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '',
          label: '全部'
        },{
          value: 'un_pay',
          label: '未支付'
        }, {
          value: 'payed',
          label: '已支付'
        }, {
          value: 'complete',
          label: '已完成'
        }],
        options2: [
          {
            value: '',
            label: '全部'
          },{
            value: 'un_order',
            label: '未完成'
          }, {
            value: 'ordered',
            label: '完成'
          }
        ],
        prop: '',
        className:'right',
        tableData:[],
        status: '',
        order_status: '',
        order_number: '',
        sort_number: '',
        author: '',
        start: '',
        end: '',
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        total_pages: 100,
        date: ''
      }
    },
    components: {

    },

    created() {
      this.orderAll(1)
    },

    methods: {

      deleteOrder(index, table) {//updateOrderOrder
        var id = table[index].id
        let params = {
          id: id
        }

        this.$confirm('此操作将删除此商品，是否继续','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteOrder', params).then(ret => {
            if(ret.success) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              this.orderAll()
            }else{
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      relationBookBookCategory(index, table) {
        var id = table[index].id
        this.$router.push({name: 'addBookBookCategory', params: {id: id}})
      },

      orderDetail(index, table) {
        var id = table[index].id
        this.$router.push({name: 'orderDetail', params: {id: id}})
      },

      changeRight(value) {
        this.className = value
      },

      orderAll(page) {

        let params = {
          page: page,
          order_number: this.order_number,
          sort_number: this.sort_number,
          status: this.status,
          order_status: this.order_status,
          start: this.start,
          end: this.end,
          date: this.formatDate(this.date)
        }

        this.$store.dispatch('orderAll', params).then((ret) => {
          this.tableData = ret.data.orders.data
          this.pagination = ret.data.orders.meta.pagination
        })

      },

      orderDetail(index, table) {
        var id = table[index].id
        this.$router.push({name: 'orderDetailForAll', params: {id: id}})
      },

      createPosition() {
        this.$router.push({ name: "createPosition" });
      },

      formatDate(date){
        if(typeof(date)=='object'){

          if(date == null) {
            return ''
          }

          var year = date.getFullYear();
          var month =(date.getMonth() + 1).toString();
          var day = (date.getDate()).toString();
          if (month.length == 1) {
            month = "0" + month;
          }
          if (day.length == 1) {
            day = "0" + day;
          }
          return year+'-'+month+'-'+day;
        }
        return date
      },

    }
  }
</script>
<style scoped>
    .header { background: #f2f2f2; }
    .jiangeShort{
      width: 10% !important;
      margin-right: 20px;
    }
</style>
